<template>
  <div class="createPost-container">
    <el-form
      ref="postForm"
      :model="postForm"
      :rules="rules"
      class="form-container"
    >
      <div class="createPost-main-container">
        <el-form-item
          prop="app_mode"
          style="margin-bottom: 40px;"
          label-width="90px"
          label="应用类型:"
        >
          <el-select
            v-model="postForm.app_mode"
            @change="appChange"
          >
            <el-option
              label="场地"
              value="4"
            >场地</el-option>
            <el-option
              label="包房"
              value="9"
            >包房</el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="store_id"
          style="margin-bottom: 40px;"
          label-width="90px"
          label="应用门店:"
        >
          <el-select
            v-model="postForm.store_id"
            @change="appChange"
          >
            <el-option
              v-for="(store, index) in store_list"
              :key="index"
              :label="store.name"
              :value="store.id"
            >{{ store.name }}</el-option>
          </el-select>
        </el-form-item>
        <el-button
          v-loading="loading"
          style="margin-left: 10px;"
          type="primary"
          @click="submitForm"
        >
          导入
        </el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { queryList as queryStoreList, importStore } from '@/shop/api/store'
import APPMODE from '@/common/js/def'

const defaultForm = {
  app_mode: '',
  store_id: ''
}

export default {
  name: 'StoreImport',
  // components: { Tinymce, MDinput, Upload },
  data() {
    const validateRequire = (rule, value, callback) => {
      if (value === '') {
        this.$message({
          message: rule.message,
          type: 'error'
        })
        callback(new Error())
      } else {
        callback()
      }
    }
    return {
      postForm: Object.assign({}, defaultForm),
      store_list: [],
      loading: false,
      userListOptions: [],
      rules: {
        app_mode: [{ validator: validateRequire, message: '应用类型为必选项目', trigger: 'blur' }],
        store_id: [{ validator: validateRequire, message: '应用门店为必选项目', trigger: 'blur' }]
      },
      tempRoute: {}
    }
  },
  methods: {
    appChange() {
      if (this.postForm.app_mode === APPMODE.PLACE) {
        queryStoreList({
          m: 'navlange_reserve_place'
        }).then(res => {
          this.store_list = res.data.items
        })
      } else if (this.postForm.app_mode === APPMODE.ROOM) {
        queryStoreList({
          m: 'navlange_ktv'
        }).then(res => {
          this.store_list = res.data.items
        })
      }
    },
    submitForm() {
      this.$refs.postForm.validate(valid => {
        if (valid) {
          this.loading = true
          importStore(this.postForm).then(response => {
            this.$notify({
              title: '成功',
              message: '导入成功',
              type: 'success',
              duration: 2000
            })
            // this.postForm.status = 'published'
            this.loading = false
            this.$router.push('/store/index')
          }).catch(err => {
            console.log(err)
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';

.createPost-container {
  position: relative;

  .createPost-main-container {
    padding: 40px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }

  .word-counter {
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}

.article-textarea ::v-deep {
  textarea {
    padding-right: 40px;
    resize: none;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #bfcbd9;
  }
}
</style>
